<template>
  <a-col v-bind="actionColOpt" v-if="showActionButtonGroup">
    <div style="width: 100%;" :style="{ textAlign: actionColOpt.style.textAlign }">
      <FormItem>
        <slot name="submitBefore"></slot>
        <Button type="primary" class="mr-2"  v-bind="getSubmitBtnOptions" @click="submitAction" v-if="showSubmitButton">
          {{ getSubmitBtnOptions.text }}
        </Button>

        <slot name="submitBefore"></slot>
        <Button type="primary" v-auth:value="getExportBtnOptions.code" danger class="mr-2" v-bind="getExportBtnOptions" @click="exportHandler" v-if="showExportButton">
          {{ getExportBtnOptions.text }}
        </Button>

        <slot name="resetBefore"></slot>
        <Button type="default" class="mr-2" v-bind="getResetBtnOptions" @click="resetAction" v-if="showResetButton">
          {{ getResetBtnOptions.text }}
        </Button>

        <slot name="advanceBefore"></slot>
        <Button type="link" size="small" @click="toggleAdvanced" v-if="showAdvancedButton && !hideAdvanceBtn">
          {{ isAdvanced ? t('component.form.putAway') : t('component.form.unfold') }}
          <BasicArrow class="ml-1" :expand="!isAdvanced" up />
        </Button>
        <slot name="advanceAfter"></slot>
      </FormItem>
    </div>
  </a-col>
</template>
<script lang="ts">
import type { PropType } from 'vue';
import type { ColEx } from '../types/index';
import type { ButtonProps } from 'ant-design-vue';
import { defineComponent, computed, onBeforeUnmount, ref, reactive, watch } from 'vue';
import { Form, Col, Button } from 'ant-design-vue';
import { BasicArrow } from '@/components/basic';
import { useMessage } from '@/hooks/web/useMessage';
import { useFormContext } from '../hooks/useFormContext';
import { useI18n } from '@pkg/locale';
import { bus } from '@pkg/utils';

type ButtonOptions = Partial<ButtonProps> & { text: string; code: string };

export default defineComponent({
  name: 'BasicFormAction',
  components: {
    FormItem: Form.Item,
    Button,
    BasicArrow,
    [Col.name]: Col,
  },
  props: {
    showActionButtonGroup: { type: Boolean, default: false },
    showResetButton: { type: Boolean, default: true },
    showSubmitButton: { type: Boolean, default: true },
    showExportButton: { type: Boolean, default: false },
    showAdvancedButton: { type: Boolean, default: true },
    resetButtonOptions: {
      type: Object as PropType<ButtonOptions>,
      default: () => ({}),
    },
    submitButtonOptions: {
      type: Object as PropType<ButtonOptions>,
      default: () => ({}),
    },
    exportButtonOptions: {
      type: Object as PropType<ButtonOptions>,
      default: () => ({}),
    },
    actionColOptions: {
      type: Object as PropType<Partial<ColEx>>,
      default: () => ({}),
    },
    actionSpan: { type: Number, default: 6 },
    isAdvanced: { type: Boolean },
    hideAdvanceBtn: { type: Boolean },
  },
  emits: ['toggle-advanced'],
  setup(props, { emit }) {
    const { t } = useI18n();
    const exportLoading = ref<any>(false);
    const exportText = ref<any>(t('common.exportText'));
    const { exportAction } = useFormContext();
    const { createConfirm } = useMessage();
    //监听导出状态
    const exportState = (loading): void => {
      exportLoading.value = loading;
      exportText.value = t('common.exportText');
    };
    // 启用监听
    bus.on('exportState', exportState);
    const actionColOpt = computed(() => {
      const { showAdvancedButton, actionSpan: span, actionColOptions } = props;
      const actionSpan = 24 - span;
      const advancedSpanObj = showAdvancedButton ? { span: actionSpan < 6 ? 24 : actionSpan } : {};
      const actionColOpt: Partial<ColEx> = {
        style: { textAlign: 'right' },
        span: showAdvancedButton ? 6 : 4,
        ...advancedSpanObj,
        ...actionColOptions,
      };
      return actionColOpt;
    });

    const getResetBtnOptions = computed((): ButtonOptions => {
      return Object.assign(
        {
          text: t('common.resetText'),
        },
        props.resetButtonOptions,
      );
    });

    function exportHandler() {
      createConfirm({
        iconType: 'info',
        title: '确认导出',
        content: '确认导出Excel？',
        onOk: async () => {
          exportLoading.value = true;
          exportText.value = '数据导出中...';
          // 启用监听
          exportAction();
        },
        onCancel: async () => {},
      });
    }

    const getSubmitBtnOptions = computed((): ButtonOptions => {
      return Object.assign(
        {
          text: t('common.queryText'),
        },
        props.submitButtonOptions,
      );
    });

    const getExportBtnOptions = computed((): ButtonOptions => {
      return Object.assign(
        {
          text: exportText.value,
          loading: exportLoading.value,
        },
        props.exportButtonOptions,
      );
    });

    function toggleAdvanced() {
      emit('toggle-advanced');
    }

    // 在组件卸载之前移除监听
    onBeforeUnmount(() => {
      bus.off('exportState', exportState);
    });

    return {
      t,
      actionColOpt,
      getResetBtnOptions,
      exportHandler,
      getSubmitBtnOptions,
      getExportBtnOptions,
      toggleAdvanced,
      ...useFormContext(),
    };
  },
});
</script>
